<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="com.zenithsun.news.newsinfo.model.Newsinfo"%>
<%
	Newsinfo newsinfo = (Newsinfo)request.getAttribute("newsinfo");
%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>南网图讯-详情页</title>
    <link type="text/css" href="${ctx}/zenithsun/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="${ctx }/zenithsun/news/pc/css/basic.css" rel="stylesheet">
    <link type="text/css" href="${ctx }/zenithsun/news/pc/css/share.css" rel="stylesheet">
    <link type="text/css" href="${ctx }/zenithsun/news/pc/css/news.css" rel="stylesheet">
    <script type="text/javascript" src="${ctx}/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
</head>
<body>
<!--头部-->
<div class="mod-newsTop">
    <div class="mod-grid clearfix">
        <div class="mod-left fn-fl">
            <h1 class="mod-logo fn-fl" title="南网图讯-新闻报道"><a href="${ctx}/path/newsinfo/index" title="南网图讯"><img src="${ctx }/zenithsun/news/pc/images/inner_logo.png" alt="南网图讯"/></a></h1>
            <div class="mod-break pl20 fn-fl">
               <a href="${ctx}/path/newsinfo/index"><i class="i-home mr5"></i>南网图片新闻网</a> <em class="i-breakTips">&gt;</em> <a href="${ctx}/path/newsinfo/channel?columnid=${newsinfo.newsColumns.id}">${newsinfo.newsColumns.name}</a> <em class="i-breakTips">&gt;</em> <a href="${ctx}/path/newsinfo/frontNewsInfo?newsId=${newsinfo.id}">正文</a>
            </div>
        </div>
    </div>
</div>

<!--内容模块-->
<div class="mainContent fn-pr news-imgList">
    <div class="topBg"></div>
    <div class="mod-grid">
        <!--主体内容-->
        <div class="mc-body clearfix">
            <!--新闻标题头部-->
            <div class="mc-newsImgItem-hd fn-pr mb20">
                <div class="mc-newsImgItem-num " id="photoList">
                	<div class="nc-newsImgItem-grid clearfix">
                		<ul class="j-showNumTotal fn-pr">
	                        <li id="endListId" class="fn-dn"><a href="javascript:void(0)" class="j-sohwEndList"></a> </li>
	                    </ul>
                	</div>
                </div>
                <div class="endListBtn fn-fl fn-dn">
	                <a href="javascript:void(0)" class="j-showNext"></a>
	                <a href="javascript:void(0)" class="j-showPer fn-dn"></a> 
                </div>
                <div class="newsImgItem-thum">
                    <div class="newsImgItem-thum-img">
                        <img src="${ctx }/zenithsun/news/pc/images/pic/pic04.jpg" alt=""/>
                    </div>
                    <em class="thum-img-tips"><i></i></em>
                </div>

                <div class="newsImgItem-title">
                    <h2 class="fn-wto">${newsinfo.title}</h2>
                </div>
            </div>
            <!--主体内容左边-->
            <div class="mod-left newsList-left pt5 fn-pr fn-fl">
                <div class="photoCarousel" id="news_bottomRoll">
                </div>

				<a href="javascript:void(0)" class="sideBtn j-sideBtn" data-side="w"></a>
            </div>
            <!--主体内容右边-->
            <div class="mod-right newsList-right pt20 fn-fr">
                <div class="mod-news-tips">
                	<div class="newGrap-grid mb5 clearfix">
                        <h4 class="newGrap mb5">新闻导语：</h4>
                        <div class="newGrap-content fts14 mb10">
                        	${newsinfo.nabstract}
                        </div>
                    </div>
                    <div class="news-author mb15">
                        栏目编辑：<em class="font-c-tip">${newsinfo.editor}</em><em class="mod-line">|</em>摄影：<em class="font-c-tip">${newsinfo.photographer}</em>
                    </div>
                    <div class="newsList-hd-info-item mb5 clearfix fn-dn">
                        <span >阅读：<em class="font-c-tip">${newsinfo.pageViewCounter+1}</em></span>
                    </div>
                     <div class="news-share mb10 clearfix">
                        <div id="shareCount" class="news-view fn-fl" >
                        	<span><i class="i-eye"></i><em class="font-c-tip">${newsinfo.pageViewCounter+1}</em></span>
                        </div>
                        <div class="news-share-grid fn-fl j-share"><i class="i-share"></i>分享</div>
                    </div> 
                    <div class="mod-newsTips-item">
                        <h3 class="font-c-tip mb20"><i class="i-note ml5"></i>标签：</h3>
                        <div id="keywords" class="mod-newsTips-note clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--图集推荐页面-->
<div class="newsImg-suggest mb20 pb20 fn-dn">
    <div class="newsImg-st-hd mb20">
        <h2 class="newsImg-st-txt">${newsinfo.title}</h2>
        <div class="newsImg-st-info clearfix">
            <div class="newsImg-st-info-tips fn-fl"><i class="i-tips"></i>图集已浏览完毕</div>
            <div class="newsImg-st-info-repeat fn-fl"><a href="javascript:void(0);" class="j-showImgItems"> <i class="i-repeat"></i>重新浏览</a></div>
            <div class="newsImg-st-info-share fn-fl j-share"><i class="i-share"></i>分享</div>
        </div>
    </div>

    <div class="newsImg-st-bd fn-pr">
        <div class="newsTmg-st-LR-btn">
            <a href="javascript:void(0);" class="st-leftBtn j-showImgItems"><i></i><em>上一图片</em></a>
            <a href="javascript:void(0);" class="st-rightBtn" id="nextNews" ><i></i><em>下一图集</em></a>
        </div>
        <div class="newsImg-st-content">
            <div class="newsImg-st-grid clearfix">
                <div class="newsImg-st-items st-items-left fn-fl" id="hotNews">
                </div>

                <div class="newsImg-st-items fn-fr st-items-right" id="passedNews">
                </div>
            </div>
        </div>
    </div>

</div>

<!--回到顶部模块-->
<div class="mod-grid fn-pr go-top">
    <a href="javascript:void(0);" title="回到顶部">回到顶部</a>
</div>
<!--底部模块-->
<div class="mod-footer">
    <div class="mod-grid clearfix">
        <div class="mod-left fn-tac fn-fl">
            <p class="mod-footer-item"><a href="#" title="关于南网图片新闻网">关于南网图片新闻网</a>|<a href="#" title="服务协议">服务协议</a>|<a href="#" title="隐私政策">隐私政策</a>|<a href="#" title="图片版权">图片版权</a></p>
            <p><a href="#">南方电网传媒有限公司</a> 版权所有　Copyright © 2015 www.csgpic.cn. All rights reserved <a href="#">粤ICP备16079034号</a> </p>
            <p>地址：广东省广州市越秀区东风东路846号　邮编：510600　联系电话：(86－020)38122925　传真：(86－020)38122993/38122992</p>
        </div>
        <div class="mod-right fn-fr">
            <a href="#" class="mod-codeBox">
                <h4>南网图片新闻客户端</h4>
                <img src="${ctx}/zenithsun/app/appQRCode.png" alt=""/>
            </a>
        </div>
    </div>
</div>


<script type="text/javascript" src="${ctx}/zenithsun/news/pc/js/ui.js"></script>
<script type="text/javascript" src="${ctx}/zenithsun/news/pc/js/share.js"></script>
<script type="text/javascript" src="${ctx}/zenithsun/news/pc/js/common.js"></script>
<script>
     
    //处理标签 按照‘,’分隔
    function showKeyWord(keyword){
    	var keywords = splitKeyWord(keyword); //调用通用的拆分方法 common.js
    	var keyHref = "";
 	    for (i=0;i<keywords.length ;i++ )   
	    {
 	    	var kw = encodeURI(encodeURI(keywords[i]));
 	    	var searchUrl = "${ctx}/path/newsinfo/search?value=" + kw;
 	    	keyHref += " <a href=\"" + searchUrl +"\">" + keywords[i] + "</a>";
	    } 
    	document.getElementById ("keywords").innerHTML = keyHref;
    }
    
    //处理图片
    function showPicture(){
    	//先把图片详情读取
    	var arrPath=new Array();
    	var arrRemark=new Array();
		<%
		for(int i=0;i<newsinfo.getNewsdetails().size();i++){
		%>
		arrPath[<%=i%>]='<%=newsinfo.getNewsdetails().get(i).getPath()%>'
		<%
		}
		%>
		<%
		for(int i=0;i<newsinfo.getNewsdetails().size();i++){
		%>
		arrRemark[<%=i%>]='<%=newsinfo.getNewsdetails().get(i).getRemark()%>'
		<%
		}
		%>
		//创建图片详情HTML
    	var content = "<ul>";
    	var count = <%=newsinfo.getNewsdetails().size()%>;
 	    for (i=0;i<count;i++ )   
	    {
 	    	var index = i + 1;
 	    	content += "<li id=\"id" + i + "\"><div class=\"photoItem-cont\"><div class=\"photoItem\">";
 	    	content += "<div class=\"photoImg\"><img src=\"${ctx }/zenithsun/news/images/" + arrPath[i] + "\" alt=\"\"></div></div></div>";
 	    	content += "<div class=\"photoItem-text\"><div class=\"photoItem-textGrid clearfix\"><span class=\"photoItemNum fn-fl\">";
 	    	content += "<em class=\"itemNum-list\">" + index + "</em><em>/</em>";
 	    	content += "<em class=\"itemNum-ord\">" + count + "</em></span>";
 	    	content += "<h3 class=\"singTxt\"><p>" + arrRemark[i] + "</p></h3><div class=\"singTop\"></div></div></div></li>";
	    } 
 	   content += "</ul>";
 	   content += "<div class=\"photoItemLIst\"><span></span></div>";
 	   content += "<a href=\"javascript:void(0)\" class=\"scrollBtn prev\">上一页</a>";
 	   content += "<a href=\"javascript:void(0)\" class=\"scrollBtn next\">下一页</a>";

 	   //document.getElementById ("news_bottomRoll").innerHTML = content;
 	   $("#news_bottomRoll").html(content);
    }

    //伪造分享数据
 //   function showShareCount(){
 //  	var ran = parseInt('<%=newsinfo.getId().substring(newsinfo.getId().length()-4,newsinfo.getId().length())%>')*98;
 //   	document.getElementById ("shareCount").innerHTML = "<i class=\"i-eye\"></i>" + ran;
 //   }
    
    //显示推荐新闻
    function showRecommendNews(){
    	var realPath = "<%=request.getContextPath()%>"; //地址
    	var parameter = {};
    	parameter["id"] = '${newsinfo.keyword}';
     	//获取查询数据
     	$.post(realPath+"/path/newsinfo/hotNewsList", {},
     			function(result) {
     				if (result.state == 'Success') {
 	 					//下一个新闻
 	 					var newsUrl = "${ctx }/path/newsinfo/frontNewsInfo?newsId=" + result.content.nexId;
 	 					document.getElementById("nextNews").href = newsUrl;
     					//热点新闻
     					var innerHTML = "<div class=\"newsImg-st-dt\"><h2 class=\"font-c-blue\">大家都在看</h2></div><ul class=\"mod-imgList clearfix\">";
     					var list = result.content.Newsinfos;
     					for(var i=0; i<6; i++){
     						if(i == result.content.length) break;
     				 	    newsUrl = "${ctx }/path/newsinfo/frontNewsInfo?newsId=" + list[i]["id"];
     						innerHTML += "<li class=\"fn-fl\"><a href=\"" + newsUrl + "\" title=\"\">";
     						innerHTML += "<img src=\"${ctx }" + list[i]["coverPath"] + "\" alt=\"\" />";
     						innerHTML += "<div class=\"mod-imgList-hd\">";
     						innerHTML += "<h3>" + list[i]["title"] + "</h3></div></a></li>";
     					}
     					innerHTML += "</ul>";
     			    	document.getElementById ("hotNews").innerHTML = innerHTML;
     					//往期回顾
     					var innerHTML2 = "<div class=\"newsImg-st-dt\"><h2 class=\"\">往期回顾</h2></div><ul class=\"mod-imgList clearfix\">";
     					for(i=6; i<8; i++){
     						if(i >= result.content.length) break;
     				 	    newsUrl = "${ctx }/path/newsinfo/frontNewsInfo?newsId=" + list[i]["id"];
     				 	    innerHTML2 += "<li class=\"fn-fl\"><a href=\"" + newsUrl + "\" title=\"\">";
     				 	    innerHTML2 += "<img src=\"${ctx }" + list[i]["coverPath"] + "\" alt=\"\" />";
     				 	    innerHTML2 += "<div class=\"mod-imgList-hd\">";
     				 	    innerHTML2 += "<h3>" + list[i]["title"] + "</h3></div></a></li>";
     					}
     					innerHTML2 += "</ul>";
     			    	document.getElementById ("passedNews").innerHTML = innerHTML2;
     				} else {
     					alert("操作失败,原因："+result.content);
     				}
     			}
     		);
    }
    
    //加载后执行
    $(function () {
    	//处理标签
    	showKeyWord('${newsinfo.keyword}');
    	  //处理图片
    	showPicture(); //这个是图片加载
    	//显示分享数据
    	//showShareCount();
    	//显示推荐新闻
        showRecommendNews();
        //更新浏览量
    	updateCounter();
    	
    	var $kH = 0;
    	var $setTim;
    	if($kH==0){
    		 $kH = $(".photoImg").find("img").outerHeight();
    		$setTim = setTimeout(function(){
    			$('#news_bottomRoll').newsImg_Carousel({
    			    switchover: 'fade',
    			    time:2000,
    			    auto:false
    			});
    		},800);
    	}else{
    		clearTimeout(setTim);
    	}		
        //分享
        $(".j-share").socialShare({
            content: '${newsinfo.title}',
            url:window.location.href,
            title:'${newsinfo.title}'
        });
        
        //滚动列表
        var $scrolNum =$("#news_bottomRoll ul").find("li").length; 
     
        if($scrolNum>7){
        	var i=0;
        	$(".endListBtn").removeClass("fn-dn");
        	//序号下一列点击
        	$(".j-showNext").on('click',function(){
        		var $wid = $(".j-showNumTotal").outerWidth();
        		var $wpd =  $wid -280;
        		var $LeftW = $wpd + $(".j-showNumTotal").position().left;
        		var $wld = 280;
        		if($LeftW>0){
        			i++;
        			$(".j-showNumTotal").animate({left:-$wld*i},500);
        			$(".j-showPer").show();
        			
        		}else{
        			$(".j-showNumTotal").animate({left:"0"},500);
        			$(".j-showPer").hide();
        			i=0;
        		}
        	});
        	//序号上一列点击
        	$(".j-showPer").on('click',function(){
        		var $wid = $(".j-showNumTotal").outerWidth();
        		var $NLeftW = $(".j-showNumTotal").position().left;
        		var $LeftW = $wid + $NLeftW;
        		var $wld = 280;
        		--i;
        		$(".j-showNumTotal").animate({left:-$wld*i},500);
        		if($NLeftW == -$wld){
        			$(this).hide();
        			i=0;
        		}
        	});
        }
      //新闻内页详情效果
        $(".photoItem-textGrid").each(function(i){
        	var $h3 = $(this).find(".singTxt");
        	var $pTxt = $h3.find("p");
        	var $singTop = $(this).find(".singTop");
        	$(this).hover(function(){
           		$pTxt.stop().animate({"height":"100%"});
           		$singTop.addClass("singTop_down");
        	},function(){
        		$pTxt.stop().animate({"height":"48px"});
        		$singTop.removeClass("singTop_down");
        	})
        	
        });
      //新闻宽屏效果
      $(".j-sideBtn").on('click',function(){
    	  var $dataSide = $(this).attr("data-side");
    	  var $ListRightWidth = $(".newsList-right").width();
    	  if($dataSide == "w"){
    		  $(this).addClass("sideBtn_left");
    		  $(".newsList-right").stop().animate({marginRight:-$ListRightWidth});
    		  $(".newsList-left").stop().animate({"width":"100%"});
    		  $(this).attr("data-side","l");
    	  }else if($dataSide == "l"){
    		  $(this).removeClass("sideBtn_left");
    		  $(".newsList-right").stop().animate({marginRight:"0"});
    		  $(".newsList-left").stop().animate({"width":"69%"});
    		  $(this).attr("data-side","w");
    	  } 
      });
    //图片异常处理，默认图片
	  var imgTags = document.getElementsByTagName("img");
	  for(var i = 0; i < imgTags.length; i++){
		  imgTags.item(i).onerror = function(){
	            this.src = "${ctx}/zenithsun/news/mobile/images/Default-bg270x180.png";
	            this.onerror = null;
	      };
	  }
    });
    
   function updateCounter(){
    	$.ajax({
			type : "POST",
			url : "${ctx}/path/newsinfo/modCounter",
			data : {id:"${newsinfo.id}"},
			success : function(data) {
		}
	});
   }   
</script>
</body>
</html>